<template>
  <div>
    <div class="w1230 auto flex between menu">
      <div>
        <div class="flex between logo-box">
          <div>
            <img src="@/assets/logo.png" width="55"/>
          </div>
          <div class="flex between menu-box">
            <!-- 具体数据 -->
            <div v-for="(item,index) in list" :key="index" class="item">
              {{ item.title }}
              <div class="data-box">
                <div class="w1230 auto flex between">
                  <div v-for="(goods,i) in item.data" :key="i">
                    <div>
                      <img :src="goods.img"/>
                    </div>
                    <div>{{goods.title}}</div>
                    <div>{{goods.price}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="search-box flex relative">
        <input v-model="search"><button>搜索</button>
        <!--  v-model 双向数据绑定   用search变量绑定input的内容 -->
        <div v-show="!search" class="absolute inputText">{{ inputText }}</div>
        <!-- v-show 元素的显示和隐藏   true 显示       false 隐藏 -->
        <!-- ! 取反 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          title: 'Xiaomi手机',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: require('@/assets/1.webp'),  // js中引入
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: 'Redmi手机',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: '电视',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: '笔记本',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: '平板',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: 'Xiaomi手机',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        },
        {
          title: 'Xiaomi手机',
          data: [
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            },
            {
              title: 'Xiaomi MIX Fold 3',
              img: '',
              price: 8999,
            },
            {
              title: 'Xiaomi Civi 3',
              img: '',
              price: 2499,
            }
          ]
        }
      ], // 数组 放置多条数据
      inputText: '笔记本电脑',
      inputTextArr: ['笔记本电脑', '手机', '充电宝', '路由器'],
      search: ''
    }
  },
  methods: { // 函数
    textChange () {

    }
  },
  beforeCreate() {}, //创建前  不能使用data中的数据 
  created() {
    // 随机产生 0-3之间的数字
    setInterval(()=>{
      var i = Math.floor(Math.random()*4)
      this.inputText = this.inputTextArr[i]
    }, 5000)
  },
  beforeMount ( ) {},
  mounted () {},
  boforeUpdate () {},
  updated(){},
  beforeDestroy() {},
  destroyed(){}  //彻底销毁  不能使用data中的数据 
  
}
</script>

<style scoped lang="less">
.menu{
  height: 75px;
  margin-top: 20px;
}
.logo-box{
  width: 800px;
}
.menu-box{
  line-height: 55px;
  .item{
    margin-right: 20px;
    padding-bottom: 20px;
    cursor: pointer; /**鼠标样式 手指 */
  }
  .item:hover{
    color: #ff6700;
  }
  .item:hover .data-box{
    display: block;
  }
}
.data-box{
  display: none;
  position: absolute;
  background: #fff;
  width: 100%;
  left: 0;
  top: 135px;
  border-top: 1px solid #eee;
  box-shadow: 0px 2px 5px #eee ; /*阴影* */
}
.search-box{
  input{
    height: 50px;
    width: 220px;
    border:1px solid #ccc;
    outline: none;
    padding: 0 10px;
  }
  button{
    width: 55px;
    height: 52px;
    border: 1px solid #ccc;
    background: none;
    border-left: none;
  }
  button:hover{
    background: #ff6700;
    color: #fff;
  }
  .inputText{
    color: #666;
    font-size: 14px;
    left: 10px;
    top: 17px;
  }
}
</style>